<template>
  <hips-view sub-header-fixed>
    <hips-nav-bar
      slot="header"
      title="界面类"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="switchShowTabBar">
      <hips-button @click="switchShowTabBarFuc">
        切换显示底部TAB
      </hips-button>
    </demo-block>

    <demo-block title="setTabBarBadge">
      <hips-button @click="setTabBarBadgeFuc">
        应用底部 tab 消息数量
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button } from '@hips/vue-ui';
import { Interface } from '@hips/plugin-vue-jssdk';

const { switchShowTabBar, setTabBarBadge } = Interface;

export default {
  components: {
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      showTabbar: true,
    };
  },
  methods: {
    switchShowTabBarFuc() {
      switchShowTabBar(!this.showTabbar)
        .then((res) => {
          console.log('res = ', res);
          this.showTabbar = !this.showTabbar;
        })
        .catch((err) => {
          console.log('err = ', err);
        });
    },
    setTabBarBadgeFuc() {
      setTabBarBadge({
        index: 1,
        count: 3,
      })
        .then((res) => {
          console.log('res = ', res);
        })
        .catch((err) => {
          console.log('err = ', err);
        });
    },
  },
};
</script>

<style lang="stylus"></style>
